<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'

const elementId = ref('myElement')

onMounted(() => {
  type EChartsOption = echarts.EChartsOption
  var chartDom = document.getElementById('myElement')
  var myChart = echarts.init(chartDom, 'dark')
  window.addEventListener('resize', function () {
    myChart.resize()
  })
  var option: EChartsOption

  option = {
    backgroundColor: '',
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    grid: {
      left: 'lefdt'
    },
    legend: {
      orient: 'vertical',
      left: 'right'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        right: '30%', // 距离图表容器左边的偏移
        top: '30%',
        radius: '60%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  option && myChart.setOption(option)
})
</script>

<template>
  <div :id="elementId" style="width: 100%; height: 100%"></div>
</template>
